<template>
  <span class="inline-block">
    <input v-model="enable" type="checkbox" class="vc-w-5 vc-h-5 vc-inline-block vc-align-middle vc-mr-2" />
    <input
      v-model="limitValue"
      type="number"
      class="vc-border vc-border-solid vc-border-gray-300 vc-align-middle vc-px-1 vc-py-0.5 vc-w-16 vc-rounded"
      :disabled="!enable"
    />
  </span>
</template>
<script lang="ts" setup>
import { ref, watch } from "vue";

const props = defineProps<{
  value: number | null;
}>();
const emits = defineEmits(["update:value"]);

const enable = ref(props.value !== null);
const limitValue = ref<number>(props.value || 0);
watch([enable, limitValue], (vs) => {
  if (vs[0]) {
    emits("update:value", vs[1] || 0);
  } else {
    emits("update:value", null);
  }
});
watch(
  () => props.value,
  (v) => {
    if (v === null) {
      enable.value = false;
    } else {
      enable.value = true;
      limitValue.value = v;
    }
  }
);
</script>
